<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Omi Apps - Email & Presentation Assistant</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="Icon.png" type="image/png">
    <style>
        :root {
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --accent: #FFE66D;
            --background: #F7FFF7;
            --text: #2D3047;
            --border-thick: 4px;
            --shadow-offset: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: var(--background);
            color: var(--text);
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            border: var(--border-thick) solid var(--text);
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--text);
            transform: translate(-4px, -4px);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .container:hover {
            transform: translate(-2px, -2px);
            box-shadow: 4px 4px 0 var(--text);
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: var(--accent);
            border: var(--border-thick) solid var(--text);
            transform: rotate(-1deg);
        }

        header h1 {
            color: var(--text);
            font-size: 3.5em;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: -2px;
        }

        header p {
            font-size: 1.4em;
            margin-top: 10px;
            font-weight: 500;
        }

        .top-setup-banner {
            background: var(--primary);
            color: white;
            padding: 20px;
            margin: -20px -20px 30px -20px;
            text-align: center;
            border: var(--border-thick) solid var(--text);
            transform: rotate(1deg);
        }

        .top-setup-banner strong {
            color: var(--accent);
        }

        .supported-services {
            background: var(--secondary);
            border: var(--border-thick) solid var(--text);
            padding: 25px;
            margin: 40px 0;
            transform: rotate(-1deg);
        }

        .supported-services h2 {
            color: var(--text);
            text-align: center;
            font-size: 2em;
            margin-bottom: 30px;
            text-transform: uppercase;
        }

        .service-list {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
            transform: rotate(1deg);
        }

        .service-card {
            background: white;
            border: var(--border-thick) solid var(--text);
            padding: 25px;
            width: 300px;
            text-align: center;
            box-shadow: 6px 6px 0 var(--text);
            transform: translate(-3px, -3px);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .service-card:hover {
            transform: translate(0, 0);
            box-shadow: 3px 3px 0 var(--text);
        }

        .service-card img {
            width: 64px;
            height: 64px;
            margin-bottom: 20px;
            border: 3px solid var(--text);
            border-radius: 12px;
            padding: 8px;
            background: white;
        }

        .service-card h3 {
            color: var(--text);
            font-size: 1.8em;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        .status {
            display: inline-block;
            padding: 8px 16px;
            font-weight: 700;
            text-transform: uppercase;
            border: 3px solid var(--text);
        }

        .status.active {
            background: var(--accent);
            color: var(--text);
        }

        .setup-required {
            background: var(--accent);
            border: var(--border-thick) solid var(--text);
            padding: 25px;
            margin: 40px 0;
            transform: rotate(1deg);
        }

        .setup-steps {
            background: white;
            border: var(--border-thick) solid var(--text);
            padding: 25px;
            margin-top: 20px;
            transform: rotate(-1deg);
        }

        .setup-steps ol {
            list-style-type: none;
            counter-reset: steps;
            padding: 0;
        }

        .setup-steps ol li {
            margin: 15px 0;
            padding-left: 40px;
            position: relative;
            font-size: 1.2em;
        }

        .setup-steps ol li:before {
            counter-increment: steps;
            content: counter(steps);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            background: var(--primary);
            color: white;
            border: 3px solid var(--text);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .note, .warning {
            margin-top: 20px;
            padding: 15px;
            border: 3px solid var(--text);
            font-weight: 500;
        }

        .note {
            background: var(--secondary);
            color: var(--text);
        }

        .warning {
            background: var(--primary);
            color: white;
        }

        .instructions {
            margin: 40px 0;
        }

        .step {
            background: white;
            border: var(--border-thick) solid var(--text);
            padding: 25px;
            margin: 30px 0;
            box-shadow: 6px 6px 0 var(--text);
            transform: translate(-3px, -3px);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .step:hover {
            transform: translate(0, 0);
            box-shadow: 3px 3px 0 var(--text);
        }

        .step h3 {
            color: var(--primary);
            font-size: 1.8em;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        .action-type {
            background: var(--accent);
            border: var(--border-thick) solid var(--text);
            padding: 25px;
            margin: 20px 0;
            transform: rotate(-1deg);
        }

        .action-type h4 {
            color: var(--text);
            font-size: 1.5em;
            margin-bottom: 20px;
            text-transform: uppercase;
        }

        .action-type ul {
            list-style-type: none;
            padding: 0;
        }

        .action-type li {
            background: white;
            margin: 10px 0;
            padding: 15px;
            border: 3px solid var(--text);
            font-weight: 500;
        }

        em {
            background: var(--secondary);
            padding: 4px 8px;
            font-style: normal;
            border: 2px solid var(--text);
            color: var(--text);
        }

        .confirmation-examples {
            background: var(--secondary);
            border: var(--border-thick) solid var(--text);
            padding: 25px;
            margin: 30px 0;
            transform: rotate(1deg);
        }

        .confirmation-examples code {
            background: white;
            display: block;
            padding: 15px;
            margin: 15px 0;
            border: 3px solid var(--text);
            font-family: 'Space Grotesk', monospace;
            font-size: 1.1em;
            font-weight: 500;
        }

        .success-view {
            text-align: center;
            padding: 40px 20px;
        }

        .success-card {
            background: white;
            border: var(--border-thick) solid var(--text);
            padding: 30px;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--text);
            transform: translate(-4px, -4px);
        }

        .success-icon {
            font-size: 48px;
            color: var(--primary);
            margin-bottom: 20px;
        }

        .device-info {
            background: var(--accent);
            border: var(--border-thick) solid var(--text);
            padding: 20px;
            margin: 20px 0;
            transform: rotate(-1deg);
        }

        .next-steps {
            background: var(--secondary);
            border: var(--border-thick) solid var(--text);
            padding: 20px;
            margin: 20px 0;
            transform: rotate(1deg);
        }

        .next-steps h3 {
            color: var(--text);
            margin-bottom: 15px;
            font-size: 1.5em;
            text-transform: uppercase;
        }

        .next-steps ul {
            list-style-type: none;
            padding: 0;
        }

        .next-steps li {
            background: white;
            margin: 10px 0;
            padding: 15px;
            border: 3px solid var(--text);
            font-weight: 500;
            position: relative;
            padding-left: 40px;
        }

        .next-steps li:before {
            content: "✓";
            position: absolute;
            left: 15px;
            color: var(--primary);
            font-weight: bold;
        }

        .redirect-notice {
            background: var(--accent);
            border: var(--border-thick) solid var(--text);
            padding: 20px;
            margin-top: 30px;
            color: var(--text);
            transform: rotate(-1deg);
        }

        .countdown {
            font-weight: bold;
            color: var(--primary);
            background: white;
            padding: 2px 8px;
            border: 2px solid var(--text);
        }

        .button {
            display: inline-block;
            padding: 12px 24px;
            background: var(--primary);
            color: white;
            text-decoration: none;
            border: var(--border-thick) solid var(--text);
            font-weight: bold;
            text-transform: uppercase;
            box-shadow: 4px 4px 0 var(--text);
            transform: translate(-2px, -2px);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .button:hover {
            transform: translate(0, 0);
            box-shadow: 2px 2px 0 var(--text);
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            background: var(--accent);
            border: var(--border-thick) solid var(--text);
            transform: rotate(1deg);
        }

        .hidden {
            display: none;
        }

        @media (max-width: 768px) {
            :root {
                --border-thick: 3px;
                --shadow-offset: 6px;
            }

            header h1 {
                font-size: 2.5em;
            }

            .service-card {
                width: 100%;
            }

            .container {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="success-view" class="success-view hidden">
            <div class="success-card">
                <div class="success-icon">✓</div>
                <h2>Successfully Connected!</h2>
                <p>Your Omi device is now linked with your email account</p>
                
                <div class="device-info">
                    <h3>Device Information</h3>
                    <p id="device-id"></p>
                    <p id="user-email"></p>
                </div>

                <div class="next-steps">
                    <h3>What's Next?</h3>
                    <ul>
                        <li>Return to your Omi device app</li>
                        <li>Your email integration is ready to use</li>
                        <li>Try saying "Hey Email, send an email"</li>
                        <li>Or say "Hey Omi, create a presentation about [topic]"</li>
                    </ul>
                </div>

                <div class="redirect-notice">
                    <p>Redirecting back to Omi app in <span id="countdown">5</span> seconds...</p>
                </div>
            </div>
        </div>

        <div id="main-content">
            <header>
                <h1>Welcome to Omi Apps!</h1>
                <p>Your voice-powered email and presentation assistant.</p>
            </header>

            <div class="top-setup-banner">
                <p><strong>New to Omi Apps?</strong> 👋</p>
                <p>To get started, open your Omi device app and go to the <strong>Setup Screen</strong> to configure your email and presentation features.</p>
            </div>

            <div class="supported-services">
                <h2>Available Apps & Services</h2>
                <div class="service-list">
                    <div class="service-card">
                        <img src="../assets/gmail.png" width="64" height="64" alt="Gmail Logo">
                        <h3>Email Assistant</h3>
                        <p>Full support for sending and receiving emails through Gmail with voice commands</p>
                        <span class="status active">Currently Active</span>
                    </div>
                    <div class="service-card">
                        <img src="../assets/slidesgpt.png" width="64" height="64" alt="SlidesGPT Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                        <div style="display:none; width:64px; height:64px; background:var(--secondary); border:3px solid var(--text); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px;">📊</div>
                        <h3>Presentation Generator</h3>
                        <p>AI-powered presentation creation with SlidesGPT integration and real-time progress tracking</p>
                        <span class="status active">Currently Active</span>
                    </div>
                </div>
            </div>

            <div id="setup-notice" class="setup-required hidden">
                <h3>⚠️ Device Setup Required</h3>
                <div class="setup-steps">
                    <p><strong>To start using Omi Apps, follow these steps:</strong></p>
                    <ol>
                        <li>Open your Omi device app</li>
                        <li>Go to the main menu</li>
                        <li>Tap on "Settings" or the gear icon ⚙️</li>
                        <li>Select "App Integration"</li>
                        <li>Choose "Email Assistant" or "Presentation Generator"</li>
                        <li>Follow the setup instructions for each app</li>
                    </ol>
                    <p class="note">⚡ Quick Tip: You can set up both apps independently through the device app's setup flow.</p>
                    <p class="warning">❗ Attempting to use features here without device setup will not work.</p>
                </div>
            </div>

            <section class="instructions">
                <h2>How to Use Omi Apps</h2>
                <p>Your voice assistant provides two powerful apps: Email Assistant for managing emails and Presentation Generator for creating slides.</p>
                
                <div class="step">
                    <h3>1. Choose Your App</h3>
                    <p>Start with the appropriate trigger phrase:</p>
                    <ul>
                        <li><strong>"Hey Email"</strong> - For email operations (send, check, search emails)</li>
                        <li><strong>"Hey Omi"</strong> - For presentation generation (create slides, make decks)</li>
                    </ul>
                </div>

                <div class="step">
                    <h3>2. Email Assistant Commands</h3>
                    
                    <div class="action-type">
                        <h4>Sending Emails</h4>
                        <p>To send an email, you can use phrases like:</p>
                        <p><em>"Hey Email, send an email to <strong>John Doe</strong>, subject <strong>Project Update</strong>, message <strong>Let's discuss the progress on the TPS reports next week.</strong>"</em></p>
                        <p>Or with direct email address: <em>"Hey Email, email <strong>jane.doe@example.com</strong> about the <strong>marketing campaign</strong> and tell her <strong>the new ad creatives are ready for review.</strong>"</em></p>
                    </div>

                    <div class="action-type">
                        <h4>Fetching Emails</h4>
                        <p>To fetch and read emails, you can use commands like:</p>
                        <ul>
                            <li><em>"Hey Email, check my inbox"</em> - Gets recent emails</li>
                            <li><em>"Hey Email, any new emails from John?"</em> - Checks emails from a specific person</li>
                            <li><em>"Hey Email, find emails about the project update"</em> - Searches emails by topic</li>
                        </ul>
                    </div>
                </div>

                <div class="step">
                    <h3>3. Presentation Generator Commands</h3>
                    
                    <div class="action-type">
                        <h4>Creating Presentations</h4>
                        <p>To generate a presentation, use commands like:</p>
                        <ul>
                            <li><em>"Hey Omi, create a presentation about <strong>artificial intelligence trends</strong>"</em></li>
                            <li><em>"Hey Omi, make slides on <strong>quarterly sales results</strong>"</em></li>
                            <li><em>"Hey Omi, generate a deck about <strong>sustainable energy solutions</strong>"</em></li>
                        </ul>
                    </div>

                    <div class="action-type">
                        <h4>3-Notification System</h4>
                        <p>When creating presentations, you'll receive three notifications:</p>
                        <ul>
                            <li><strong>1. Trigger Detection</strong> - Immediate response with viewer URL</li>
                            <li><strong>2. Generation Started</strong> - Notification when AI processing begins</li>
                            <li><strong>3. Completion</strong> - Final notification with presentation links or error details</li>
                        </ul>
                    </div>
                </div>

                <!-- <div class="step">
                    <h3>3. Confirmation and Follow-ups</h3>
                    <div class="confirmation-examples">
                        <h4>For Sending Emails:</h4>
                        <p>If multiple recipients are found, you'll be asked to confirm:</p>
                        <p><code>I found a few potential recipients:</code></p>
                        <p><code>1. John Doe &lt;john.doe@example.com&gt;</code></p>
                        <p><code>2. Johnny Doe &lt;johnny.doe@example.com&gt;</code></p>
                        <p><code>Who should I email? Please say the number or name, or say 'cancel'.</code></p>

                        <h4>For Fetching Emails:</h4>
                        <p>You can interact with found emails:</p>
                        <ul>
                            <li><em>"Read that email"</em> - To hear the content of a specific email</li>
                            <li><em>"Reply to that"</em> - To compose a reply</li>
                            <li><em>"Next email"</em> or <em>"Previous email"</em> - To navigate through results</li>
                            <li><em>"Mark as read"</em> or <em>"Flag as important"</em> - To manage email status</li>
                        </ul>
                    </div>
                </div> -->
                
                <div class="step">
                    <h3>4. Tips for Best Results</h3>
                    
                    <div class="action-type">
                        <h4>General Tips</h4>
                        <ul>
                            <li>Speak clearly and at a moderate pace</li>
                            <li>Use the correct trigger phrase for each app ("Hey Email" vs "Hey Omi")</li>
                            <li>Be specific with your requests for better results</li>
                        </ul>
                    </div>

                    <div class="action-type">
                        <h4>Email Assistant Tips</h4>
                        <ul>
                            <li>Be specific with search criteria when fetching emails</li>
                            <li>You can use natural language like "from yesterday" or "last week" for time-based searches</li>
                            <li>If a name is unusual, spelling it out or providing the full email address can help</li>
                            <li>Use follow-up commands to refine your search results</li>
                        </ul>
                    </div>

                    <div class="action-type">
                        <h4>Presentation Generator Tips</h4>
                        <ul>
                            <li>Provide detailed topics for better slide content</li>
                            <li>You can access the real-time viewer URL to watch progress</li>
                            <li>Presentations are saved and can be accessed later via embed or download links</li>
                            <li>Wait for all three notifications to ensure completion</li>
                        </ul>
                    </div>
                </div>
            </section>

            <section id="auth-section" class="login-info hidden">
                <h2>Authentication</h2>
                <p>To use the Email Assistant, you need to be logged in with your email account.</p>
                <p><a id="login-link" href="/api/email/auth/login" class="button">Login with Email</a></p>
                <div class="note" style="margin-top: 20px;">
                    <p><strong>Note:</strong> Presentation Generator doesn't require separate authentication - it works directly with your Omi device.</p>
                </div>
            </section>

            <section class="instructions">
                <h2>Quick Access</h2>
                <div class="service-list">
                    <div class="service-card">
                        <h3>📧 Email Interface</h3>
                        <p>Access the dedicated email assistant interface</p>
                        <a href="/email" class="button">Go to Email App</a>
                    </div>
                    <div class="service-card">
                        <h3>📊 Presentation Interface</h3>
                        <p>Access the presentation generator interface</p>
                        <a href="/deck" class="button">Go to Deck App</a>
                    </div>
                </div>
            </section>

            <footer>
                <p>&copy; 2025 Omi Apps - Email & Presentation Assistant. All rights reserved.</p>
            </footer>
        </div>
    </div>

    <script>
        // Get URL parameters
        const urlParams = new URLSearchParams(window.location.search);
        const omiuid = urlParams.get('uid');
        const authStatus = urlParams.get('auth_status');
        const deviceConnected = urlParams.get('device_connected');
        
        // Function to get user email from JWT token
        function getUserEmailFromToken() {
            const token = document.cookie
                .split('; ')
                .find(row => row.startsWith('token='))
                ?.split('=')[1];
            
            if (token) {
                try {
                    const base64Url = token.split('.')[1];
                    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
                    const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => {
                        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                    }).join(''));
                    return JSON.parse(jsonPayload).email;
                } catch (e) {
                    return null;
                }
            }
            return null;
        }

        window.onload = function() {
            const mainContent = document.getElementById('main-content');
            const successView = document.getElementById('success-view');
            const setupNotice = document.getElementById('setup-notice');
            const authSection = document.getElementById('auth-section');
            const loginLink = document.getElementById('login-link');

            // Check if we're in success state
            if (authStatus === 'success' && deviceConnected === 'true') {
                // Hide main content and show success view
                mainContent.classList.add('hidden');
                successView.classList.remove('hidden');

                // Update device info
                const deviceId = document.getElementById('device-id');
                const userEmail = document.getElementById('user-email');
                const email = getUserEmailFromToken();

                if (urlParams.get('omi_uid')) {
                    deviceId.textContent = `Device ID: ${urlParams.get('omi_uid')}`;
                }
                if (email) {
                    userEmail.textContent = `Email: ${email}`;
                }

                // Start countdown and redirect
                let countdown = 5;
                const countdownElement = document.getElementById('countdown');
                const countdownInterval = setInterval(() => {
                    countdown--;
                    countdownElement.textContent = countdown;
                    
                    if (countdown <= 0) {
                        clearInterval(countdownInterval);
                        // Redirect to Omi app using deep link
                        window.location.href = 'omi://email-setup-complete';
                    }
                }, 1000);

                // Fallback for mobile browsers that might not support deep linking
                setTimeout(() => {
                    // If we're still here after 5.5 seconds, deep link might have failed
                    // Try opening the app store or show a message
                    if (document.hasFocus()) {
                        const userAgent = navigator.userAgent.toLowerCase();
                        if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
                            // iOS App Store link
                            window.location.href = 'https://apps.apple.com/app/omi-app';
                        } else if (userAgent.includes('android')) {
                            // Google Play Store link
                            window.location.href = 'https://play.google.com/store/apps/details?id=com.omi.app';
                        }
                    }
                }, 5500);
            } else {
                // Original login flow
                if (omiuid) {
                    setupNotice.classList.add('hidden');
                    authSection.classList.remove('hidden');
                    loginLink.href = `/api/email/auth/login?uid=${encodeURIComponent(omiuid)}`;
                } else {
                    setupNotice.classList.remove('hidden');
                    authSection.classList.add('hidden');
                }
            }
        };
    </script>
</body>
</html> 